import React, { memo } from 'react'
import './style.css'
import { useScrollPosition } from './hooks'

const Home = memo(function (props) {
  /* useEffect(() => {
    function handleScroll(e) {
      console.log(window.scrollX, window.scrollY)
    }

    window.addEventListener('scroll', handleScroll)

    return () => {
      window.removeEventListener('scroll', handleScroll)
    }
  }, []) */

  return (
    <div>
      <h1>Home Page</h1>
    </div>
  )
})

const About = memo(function (props) {
  const { scrollY, scrollX } = useScrollPosition()
  return (
    <div>
      <h1>
        About Page: {scrollX} : {scrollY}
      </h1>
    </div>
  )
})

export default memo(function App() {
  return (
    <div className="app">
      <h2>App Page</h2>
      <Home />
      <About />
    </div>
  )
})
